<div class="panel panel-default panel-intro">
    <div class="panel-heading">
        <div class="panel-lead"><em>教学点班级详情</em></div>
        <ul class="nav nav-tabs">
            <li class="active"><a href="#basic" data-toggle="tab">基本信息</a></li>
            <li><a href="#courses" data-toggle="tab">课程列表</a></li>
        </ul>
    </div>
    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="basic">
                <div class="row">
                    <div class="col-xs-12 col-sm-6">
                        <div class="form-group">
                            <label class="control-label">班级名称:</label>
                            <div class="controls">
                                <div class="value">{$row.name}</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6">
                        <div class="form-group">
                            <label class="control-label">教学点:</label>
                            <div class="controls">
                                <div class="value">{$row.ocation_name}</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6">
                        <div class="form-group">
                            <label class="control-label">班级序号:</label>
                            <div class="controls">
                                <div class="value">{$row.formatted_sequence}</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6">
                        <div class="form-group">
                            <label class="control-label">课程数量:</label>
                            <div class="controls">
                                <div class="value">{$row.course_count}</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12">
                        <div class="form-group">
                            <label class="control-label">班级描述:</label>
                            <div class="controls">
                                <div class="value">{$row.description}</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12">
                        <div class="form-group">
                            <label class="control-label">班级头像:</label>
                            <div class="controls">
                                <div class="value">
                                    <img src="{$row.cover}" style="max-width: 200px; max-height: 200px;">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="courses">
                <div id="toolbar-courses" class="toolbar">
                    <a href="javascript:;" class="btn btn-success btn-add-course" data-url="{:url('classes/ocation_class/addCourse', ['ids' => $row['id']])}"><i class="fa fa-plus"></i> 添加课程</a>
                </div>
                <table class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>课程ID</th>
                            <th>课程名称</th>
                            <th>课程类别</th>
                            <th>开始时间</th>
                            <th>结束时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {foreach $courses as $course}
                        <tr>
                            <td>{$course.id}</td>
                            <td>{$course.name}</td>
                            <td>{$course.subject_lv}</td>
                            <td>{$course.start_date ? date('Y-m-d H:i:s', strtotime($course.start_date)) : ''}</td>
                            <td>{$course.end_date ? date('Y-m-d H:i:s', strtotime($course.end_date)) : ''}</td>
                            <td>
                                <a href="javascript:;" class="btn btn-xs btn-danger btn-del-course" data-url="{:url('classes/ocation_class/delCourse', ['ids' => $course['relation_id']])}"><i class="fa fa-trash"></i> 删除</a>
                            </td>
                        </tr>
                        {/foreach}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        // 添加课程按钮事件
        $(document).on('click', '.btn-add-course', function () {
            var url = $(this).data('url');
            Fast.api.open(url, '添加课程', {
                callback: function (data) {
                    if (data) {
                        location.reload();
                    }
                }
            });
        });
        
        // 删除课程按钮事件
        $(document).on('click', '.btn-del-course', function () {
            var url = $(this).data('url');
            Layer.confirm('确认删除这个课程关联吗？', {icon: 3}, function (index) {
                Layer.close(index);
                Fast.api.ajax({
                    url: url,
                    type: 'post',
                    data: {}
                }, function (data, ret) {
                    if (ret.code === 1) {
                        location.reload();
                    }
                    return false;
                });
            });
        });
    });
</script>